<template>
    <div class="container">
        <div class="title">
            <h1>项目名称</h1>
        </div>
        <div class="form-card">
            <h2 class="card-title">欢迎注册</h2>
            <n-form ref="formRef" :model="formData" :rules="rules">
                <n-form-item path="account" label="账号">
                    <n-input
                        v-model:value="formData.account"
                        clearable
                        placeholder="请输入账号"
                        @keydown.enter.prevent
                    />
                </n-form-item>
                <n-form-item path="password" label="密码">
                    <n-input
                        v-model:value="formData.password"
                        clearable
                        placeholder="请输入密码"
                        type="password"
                        @keydown.enter.prevent
                    />
                </n-form-item>
                <n-form-item path="passwordConfirm" label="确认密码">
                    <n-input
                        v-model:value="formData.passwordConfirm"
                        clearable
                        placeholder="再次输入密码"
                        type="password"
                        @keydown.enter.prevent
                    />
                </n-form-item>
            </n-form>
            <div class="footer">
                <span class="login"
                    >已有账号<span @click="onLogin">去登录></span></span
                >
                <n-button type="info" @click="onReg">注册</n-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { createDiscreteApi } from 'naive-ui';
import { setDocumentTitle } from '@/utils/project';
import { register } from '@/api/login';
import { useRouter } from 'vue-router';
import { ref } from 'vue';

const router = useRouter();
const { message } = createDiscreteApi(['message']);
setDocumentTitle('注册');
const formRef = ref(null);
const formData = ref({
    account: '',
    password: '',
    passwordConfirm: ''
});

function validatePasswordSame(rule, value) {
    return value === formData.value.password;
}
const rules = {
    account: [
        {
            required: true,
            message: '请输入账号'
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码'
        }
    ],
    passwordConfirm: [
        {
            required: true,
            message: '请再次输入密码',
            trigger: ['blur']
        },
        {
            validator: validatePasswordSame,
            message: '两次密码输入不一致',
            trigger: ['blur']
        }
    ]
};
const onReg = () => {
    formRef.value?.validate(errors => {
        if (!errors) {
            const params = {
                account: formData.value.account,
                password: formData.value.password
            };
            register(params).then(() => {
                message.success('注册成功，现在去登录');
                setTimeout(() => {
                    onLogin();
                }, 1000);
            });
        } else {
            console.log(errors);
        }
    });
};
const onLogin = () => {
    router.push({ name: 'login' });
};
</script>
<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: var(--blue-100);

    .title {
        position: absolute;
        top: 20px;
        left: 60px;
    }

    .form-card {
        position: absolute;
        bottom: 100px;
        right: 100px;
        width: 380px;
        padding: 20px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0px 2px 10px 0px rgba(27, 33, 41, 0.1);

        .card-title {
            text-align: center;
            margin-bottom: 10px;
        }

        .footer {
            width: 100%;
            display: inline-flex;
            justify-content: space-between;
            align-items: center;

            .login {
                span {
                    margin-left: 2px;
                    color: var(--blue-500);
                    cursor: pointer;
                }
            }
        }
    }
}
</style>
